<template>
	<view class="setting">
		<view class="divider"></view>
		<u-cell-group>
			<u-cell-item class="flex-start" :arrow="false">
				<view class="editBox" slot="title">
					<view class="avatarnickName">
						<view class="avatar">
							<open-data type="userAvatarUrl"></open-data>
						</view>
						<view class="nickName">
							<open-data type="userNickName"></open-data>
							<view class="phone">{{phone || '未绑定手机号'}}</view>
						</view>
					</view>
				</view>
				<view class="edit" slot="right-icon">
					<u-icon @click="pathTo('/pages/changePhone/changePhone')" name="edit-pen"></u-icon>
				</view>
			</u-cell-item>
			<u-cell-item @click="pathTo('/pages/myStudent/myStudent')" icon="account">
				<view slot="title">
					我的学生({{list.length}})
				</view>
			</u-cell-item>
		</u-cell-group>
		<view class="divider"></view>
		<u-cell-group>
			<u-cell-item @click="showMore('帮助信息')" icon="question-circle" title="帮助"></u-cell-item>
			<u-cell-item @click="showMore('关于我们')" icon="error-circle" title="关于"></u-cell-item>
		</u-cell-group>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import { get } from '../../utils/storage'
	
	export default {
		data() {
			return {
				list: []
			}
		},
		computed: {
			...mapState(['phone', 'avatarUrl', 'nickName', 'parentId']),
			openId() { return get('openId') }
		},
		async onShow() {
			const getChildList = await this.getChildList()
			this.list = getChildList || []
			console.log(this.list.length)
		},
		methods: {
			showMore(title) {
				uni.navigateTo({
					url: `/pages/articleDetail/articleDetail?t1=${title}`,
				})
			},
			getChildList() {
				return this.$http.post('/parent/child/list', {
					parentId: this.parentId
				}).then(res => res.data)
			},
			pathTo(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.setting {
		.chat-custom-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-end;
		}

		.chat-custom-text {
			font-size: 20px;
			color: #999;
		}
		.editBox {
			.avatarnickName {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.nickName {
					margin-left: 20rpx;
					.phone {
						color: #909092;
						font-size: $uni-font-size-sm;
					}
				}
			}
			.phone {
				margin: 0;
			}
		}
	}
</style>
